
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>online</title>

    <!-- 引入核心js和css -->
    <script type="text/javascript" src="/static/codemirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">

    <!-- 使用主题 -->
    <link href="/static/codemirror/theme/dracula.css" rel="stylesheet" type="text/css">

    <script src="/static/codemirror/mode/python/python.js"></script>

    <!-- 支持搜索 -->
    <script src="/static/codemirror/addon/selection/active-line.js"></script>
    <script src="/static/codemirror/addon/search/search.js"></script>
    <script src="/static/codemirror/addon/search/searchcursor.js"></script>
    <script src="/static/codemirror/addon/search/jump-to-line.js"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="/static/codemirror/addon/fold/foldgutter.css"/>
    <script src="/static/codemirror/addon/fold/foldcode.js"></script>
    <script src="/static/codemirror/addon/fold/foldgutter.js"></script>
    <script src="/static/codemirror/addon/fold/brace-fold.js"></script>
    <script src="/static/codemirror/addon/fold/indent-fold.js"></script>
    <script src="/static/codemirror/addon/fold/comment-fold.js"></script>

    <!--全屏模式-->
    <link rel="stylesheet" href="/static/codemirror/addon/display/fullscreen.css">
    <script src="/static/codemirror/addon/display/fullscreen.js"></script>

    <!--括号匹配-->
    <script src="/static/codemirror/addon/edit/matchbrackets.js"></script>
    <script src="/static/codemirror/addon/edit/closebrackets.js"></script>

    <!--自动补全-->
    <link rel="stylesheet" href="/static/codemirror/addon/hint/show-hint.css">
    <script src="/static/codemirror/addon/hint/show-hint.js"></script>
    <script src="/static/codemirror/addon/hint/anyword-hint.js"></script>
</head>
<body>

        <form method="post">
{#        textarea 内预设文本#}
{#        name='code' 规定文本名称#}
        {% if result %}
            <textarea id="code" name="code">{{ result }}</textarea>
            {% else %}
            <textarea id="code" name="code"># -*- coding: gbk -*-&#10;print('hi')</textarea>
        {% endif %}

    <div>
{#        button的(class)uk-button uk-button-primary属性#}
        <button type="submit" class="uk-button uk-button-primary" onclick="myFunction()">运行</button>
    </div>
        {% if info %}
            <textarea rows="10" cols="80" name="result" id="result">{{ info }}</textarea>
        {% endif %}
        </form>

    <script>
        function  myFunction() {
            var inValue = editor.getValue();
            document.getElementById("code").innerHTML = inValue;
        }
    </script>


</body>
<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode:"text/x-python",
        lineNumbers: true,     // 显示行数
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        autoCloseBrackets: true,//自动关闭括号
        lineWrapping: true,    // 自动换行
        theme: 'dracula',      // 使用模版
        showHint:true,
        extraKeys: {"Atl-Space":"autocomplete","Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    });
    // 编辑器按键监听
    editor.on("keypress", function() {
        // 显示智能提示
        editor.showHint(); // 注意，注释了CodeMirror库addon中show-hint.js第132行的代码（阻止了代码补全，同时提供智能提示）
    });

</script>
</html>


